<template>
  <div class="swiper_img">
    <swiper :options="swiperOption" @someSwiperEvent="callback" v-if="swiperlenght">
      <!-- <swiper-slide >
       <img src="../../../assets/images/test6.png" alt="">
      </swiper-slide>-->
      <swiper-slide v-for="item of imgList" :key="item.id">
        <img class="slide_img" :src="item.imgUrl" alt />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "HomeSwiper",
  props: {
    imgList: Array
  },
  data() {
    return {
      swiperOption: {
        //   传入一个页码
        pagination: ".swiper-pagination",
        loop: true
      }
      //   循环图片,这是死数据，当换成后台返回的时候，这里应该都删除的，只是给新手理解未删除
      // imgList: [
      //   {
      //     id: "01",
      //     imgUrl: "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg"
      //   },
      //   {
      //     id: "02",
      //      imgUrl: "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg"
      //   },
      //   {
      //     id: "03",
      //     imgUrl: "https://imgs.qunarzz.com/vs_ceph_vs_tts/709b13cf-820e-4139-999f-498ad9045567.jpg_r_390x260x90_49b4fd90.jpg"
      //   }
      // ]
    };
  },
  computed:{
    // 写一个函数
    swiperlenght(){
      return this.imgList.length
    }
  },
  methods: {
    callback() {
      console.log(dianji);
    }
  }
};
</script>
<style lang="stylus" scoped>
// *{touch-action: none;}
// 有时候直接修改UI框架的css修改不过来，这时候需要穿透,使用>>>
.swiper_img >>> .swiper-pagination-bullet-active {
  background: red;
}

.swiper_img {
  width: 100%;
  height: 3.5rem;
  display: block;
  background-color: green;

  .swiper-slide .slide_img {
    width: 100%;
    display: block;
    height: 3.5rem;
  }
}
</style>>